<template>
  <div class="table-box">
    <ProTable
      ref="proTableBox"
      :columns="dataGrid.columns"
      :init-param="dataGrid.initParam"
      :request-api="modelFindModelPage"
      @cell-click="openDrawer"
    >
      <template #tableHeader>
        <GlobalButton :button-list="dataGrid.headButtonList"></GlobalButton>
      </template>

      <template #operation="{ row }">
        <GlobalButton :button-list="dataGrid.rowButtonList" :row-params="row"></GlobalButton>
      </template>
    </ProTable>

    <mDrawer :visible="true" :is-close="drawerData.isClose">
      <template #content>
        <el-tabs v-model="drawerData.activeName" class="self-adaption-tabs" @tab-click="switchoverTabs">
          <el-tab-pane label="课程" name="course">
            <ProTable
              ref="courseRef"
              :request-auto="false"
              :pagination="false"
              :columns="dataCourse.columns"
              :init-param="dataCourse.initParam"
              :request-api="modelGetClassMarkByModelId"
            >
              <template #tableHeader>
                <GlobalButton :button-list="dataCourse.headButtonList"></GlobalButton>
              </template>
              <template #operation="{ row }">
                <GlobalButton :button-list="dataCourse.rowButtonList" :row-params="row"></GlobalButton>
              </template>
            </ProTable>
          </el-tab-pane>

          <el-tab-pane label="规则" name="role">
            <ProTable
              ref="roleRef"
              :pagination="false"
              :request-auto="false"
              :columns="dataRole.columns"
              :init-param="dataRole.initParam"
              :request-api="modelGetClassRuleByModelId"
            >
              <template #tableHeader>
                <GlobalButton :button-list="dataRole.headButtonList"></GlobalButton>
              </template>
              <template #operation="{ row }">
                <GlobalButton :button-list="dataRole.rowButtonList" :row-params="row"></GlobalButton>
              </template>
            </ProTable>
          </el-tab-pane>

          <el-tab-pane label="校区" name="campus">
            <ProTable
              ref="campusRef"
              :pagination="false"
              :request-auto="false"
              :columns="dataCampus.columns"
              :init-param="dataCampus.initParam"
              :request-api="modelGetAddressByModelId"
            >
              <template #tableHeader>
                <GlobalButton :button-list="dataCampus.headButtonList"></GlobalButton>
              </template>
              <template #operation="{ row }">
                <GlobalButton :button-list="dataCampus.rowButtonList" :row-params="row"></GlobalButton>
              </template>
            </ProTable>
          </el-tab-pane>

          <el-tab-pane label="购买详情" name="detail">
            <ProTable
              ref="dataDetailRef"
              :pagination="false"
              :request-auto="false"
              :columns="dataDetail.columns"
              :init-param="dataDetail.initParam"
              :request-api="modelGetBuyMarkByModelId"
            >
              <template #tableHeader>
                <GlobalButton :button-list="dataDetail.headButtonList"></GlobalButton>
              </template>
              <template #operation="{ row }">
                <GlobalButton :button-list="dataDetail.rowButtonList" :row-params="row"></GlobalButton>
              </template>
            </ProTable>
          </el-tab-pane>
        </el-tabs>
      </template>
    </mDrawer>

    <DialogForm
      v-model:visible="addForm.visible"
      :options="addForm.options"
      :title="addForm.title"
      :form-attrs="addForm.formAttrs"
      @get-model="form => (addForm.form = form)"
      @submit-form="addForm.saveForm"
    />

    <DialogForm
      v-model:visible="formAddCourse.visible"
      :options="formAddCourse.options"
      :title="formAddCourse.title"
      :form-attrs="formAddCourse.formAttrs"
      @get-model="form => (formAddCourse.form = form)"
      @submit-form="formAddCourse.saveForm"
    />

    <DialogForm
      v-model:visible="formAddRole.visible"
      :options="formAddRole.options"
      :title="formAddRole.title"
      :form-attrs="formAddRole.formAttrs"
      @get-model="form => (formAddRole.form = form)"
      @submit-form="formAddRole.saveForm"
    />

    <DialogForm
      v-model:visible="formAddCampus.visible"
      :options="formAddCampus.options"
      :title="formAddCampus.title"
      :form-attrs="formAddCampus.formAttrs"
      @get-model="form => (formAddCampus.form = form)"
      @submit-form="formAddCampus.saveForm"
    />
    <DialogForm
      v-model:visible="formAddDetail.visible"
      :options="formAddDetail.options"
      :title="formAddDetail.title"
      :form-attrs="formAddDetail.formAttrs"
      @get-model="form => (formAddDetail.form = form)"
      @submit-form="formAddDetail.saveForm"
    />
  </div>
</template>

<script setup lang="ts" name="sysSetup">
import { ProTableInstance } from '@/components/ProTable/interface';
import {
  modelFindModelPage,
  modelGetAddressByModelId,
  modelGetClassRuleByModelId,
  modelGetClassMarkByModelId,
  modelGetBuyMarkByModelId
} from '$api/template';

import { useDataGrid } from './hooks/use-dataGrid';
import { useDataCourse } from './hooks/use-dataCourse';
import { useDataRole } from './hooks/use-dataRole';
import { useDataCampus } from './hooks/use-dataCampus';
import { useDataDetail } from './hooks/use-dataDetail';

const proTableBox = ref<ProTableInstance>();
const courseRef = ref<ProTableInstance>();
const roleRef = ref<ProTableInstance>();
const campusRef = ref<ProTableInstance>();
const dataDetailRef = ref<ProTableInstance>();

// 刷新对应表格数据
const refreshTableData = () => {
  switch (drawerData.activeName) {
    case 'course':
      dataCourse.initParam.modelId = drawerData.row.id;
      break;
    case 'role':
      dataRole.initParam.modelId = drawerData.row.id;
      break;
    case 'campus':
      dataCampus.initParam.modelId = drawerData.row.id;
      break;
    case 'detail':
      dataDetail.initParam.modelId = drawerData.row.id;
      break;
  }
};
const { drawerData, switchoverTabs, openDrawer } = useDrawerData(refreshTableData, 'course');
const { dataCourse, formAddCourse } = useDataCourse(courseRef, drawerData);
const { dataRole, formAddRole } = useDataRole(roleRef, drawerData);
const { dataCampus, formAddCampus } = useDataCampus(campusRef, drawerData);
const { dataDetail, formAddDetail } = useDataDetail(dataDetailRef, drawerData);

const { dataGrid, addForm } = useDataGrid(proTableBox);
</script>
